<template>
    <div class="title">
        <el-form-item label="订单号">
        <el-input v-model="orderNoInput" placeholder="请输入订单号" style="width: 200px" />
        </el-form-item >
        <el-form-item label="收货人">
        <el-input v-model="consigneeInput" placeholder="请输入收货人" style="width: 200px" />
        </el-form-item>
        <el-form-item label="手机号">
        <el-input v-model="phoneInput" placeholder="请输入手机号" style="width: 200px" />
        </el-form-item>
        <el-form-item label="订单状态">
        <el-select v-model="orderStatusValue" placeholder="请选择订单状态" style="width: 200px">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
        </el-select>
        </el-form-item>
        <div class="flex">
            <div class="demo-date-picker" style="margin: 20px 0;">
                <div class="block">
                    <span class="demonstration">选择时间</span>
                    <el-date-picker
                        v-model="value2"
                        type="daterange"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        :shortcuts="shortcuts"
                        :size="size"
                    />
                </div>
            </div>
            <el-button type="primary" @click="searchOrders">搜索</el-button>
        </div>
    </div>
    <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
        <el-table-column prop="orderNo" label="订单号" width="124" />
        <el-table-column prop="orderTime" label="下单时间" width="124" />
        <el-table-column prop="phone" label="联系电话" width="124" />
        <el-table-column prop="consignee" label="收货人" width="124" />
        <el-table-column prop="deliverAddress" label="送货地址" width="124" />
        <el-table-column prop="deliveryTime" label="送达时间" width="124" />
        <el-table-column prop="remarks" label="备注" width="124" />
        <el-table-column prop="orderAmount" label="订单金额" width="124" />
        <el-table-column prop="orderState" label="订单状态" width="124" />
        <el-table-column prop="operation" label="操作">
            <template #default="scope">
                <el-button link type="primary" size="small" @click="openViewPage(scope.row.id)">查看</el-button>
                <el-button link type="primary" size="small" @click="openEditPage(scope.row.id)">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="demo-pagination-block">
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[5, 10, 15, 20]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import {ElMessage } from 'element-plus';
import { getOrder, editOrder, detailOrder } from '../../api/account';

const router = useRouter();
const value2 = ref(null);

const shortcuts = [
    {
        text: 'Last week',
        value: () => {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            return [start, end];
        }
    },
    {
        text: 'Last month',
        value: () => {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            return [start, end];
        }
    },
    {
        text: 'Last 3 months',
        value: () => {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            return [start, end];
        }
    }
];
const currentPage = ref(1);
const pageSize = ref(5);
const total = ref(0);
const options = [
    {
        value: '已受理',
        label: '已受理'
    },
    {
        value: '派送中',
        label: '派送中'
    },
    {
        value: '已完成',
        label: '已完成'
    }
];
const orderStatusValue = ref('');
const orderNoInput = ref('');
const consigneeInput = ref('');
const phoneInput = ref('');
const deliverAddressInput = ref('');
const tableData = ref([]);

const tableRowClassName = ({ rowIndex }) => {
    if (rowIndex % 2 === 1) {
        return 'warning-row';
    } else if (rowIndex % 2 === 0) {
        return 'success-row';
    }
};

const handleSizeChange = (newSize) => {
    pageSize.value = newSize;
    fetchOrders();
};

const handleCurrentChange = (newPage) => {
    currentPage.value = newPage;
    fetchOrders();
};

const fetchOrders = async () => {
    const params = {
        currentPage: currentPage.value,
        pageSize: pageSize.value,
        orderNo: orderNoInput.value,
        consignee: consigneeInput.value,
        phone: phoneInput.value,
        orderState: orderStatusValue.value,
        deliverAddress: deliverAddressInput.value,
        date: value2.value? value2.value.map(date => date.toISOString().split('T')[0] + ' 00:00:00') : null
    };

    try {
        const response = await getOrder(params);
        total.value = response.total;
        tableData.value = response.data;
    } catch (error) {
        console.error('Error fetching orders:', error);
    }
};

const searchOrders = () => {
    currentPage.value = 1;
    fetchOrders();
};

const openViewPage = (id) => {
    router.push({ name: 'OrderDetail', params: { id } });
};

const openEditPage = (id) => {
    router.push({ name: 'OrderEdit', params: { id } });
};

onMounted(() => {
    fetchOrders();
});
</script>

<style lang="scss" scoped>
.title {
    width: 100%;
    height: 150px;
    font-size: 20px;
    color: #333;
    line-height: 50px;
    padding-left: 20px;
    text-align: left;
    border-bottom: 1px solid #dcdfe6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.flex{
    display: flex;
    align-items: center;
}
.el-button {
    margin-left: 10px;
}
:deep(.el-table__row.warning-row) {
    background-color: #87ceeb;
    height: 46px;
    line-height: 46px;
    padding: 12px 0;
}

:deep(.el-table__row.success-row) {
    background-color: #eee8aa;
    height: 46px;
    line-height: 46px;
    padding: 12px 0;
}

:deep(.el-table__cell) {
    text-align: center;
}
.block span{
    color: #606266;
    font-size: 14px;
}
</style>